<template>
  <div class="safety-events">
    <div class="module-title">
      <div class="title-icon">📋</div>
      <div class="title-text">安全事件记录</div>
    </div>
    
    <div class="events-summary">
      <div class="summary-card today">
        <div class="summary-value">{{ todayEvents }}</div>
        <div class="summary-label">今日事件</div>
      </div>
      <div class="summary-card week">
        <div class="summary-value">{{ weekEvents }}</div>
        <div class="summary-label">本周事件</div>
      </div>
      <div class="summary-card resolved">
        <div class="summary-value">{{ resolvedEvents }}</div>
        <div class="summary-label">已处理</div>
      </div>
    </div>
    
    <div class="events-list">
      <div class="list-header">
        <span>时间</span>
        <span>事件类型</span>
        <span>等级</span>
        <span>状态</span>
      </div>
      <div class="list-content">
        <div 
          v-for="(event, index) in events" 
          :key="index"
          class="event-item"
          :class="event.level"
        >
          <div class="event-time">{{ event.time }}</div>
          <div class="event-type">
            <div class="type-name">{{ event.type }}</div>
            <div class="type-location">{{ event.location }}</div>
          </div>
          <div class="event-level">
            <span class="level-badge" :class="event.level">
              {{ event.levelText }}
            </span>
          </div>
          <div class="event-status">
            <span class="status-badge" :class="event.status">
              {{ event.statusText }}
            </span>
          </div>
        </div>
      </div>
    </div>
    
    <div class="events-chart">
      <div class="chart-title">24小时事件趋势</div>
      <div class="chart-container" ref="eventsChart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'SafetyEvents',
  data() {
    return {
      todayEvents: 8,
      weekEvents: 35,
      resolvedEvents: 28,
      events: [
        {
          time: '14:32',
          type: '高空坠物',
          location: '长江大桥施工区',
          level: 'high',
          levelText: '严重',
          status: 'processing',
          statusText: '处理中'
        },
        {
          time: '13:45',
          type: '设备故障',
          location: '隧道掘进面',
          level: 'medium',
          levelText: '一般',
          status: 'resolved',
          statusText: '已处理'
        },
        {
          time: '12:18',
          type: '人员违章',
          location: '材料堆放区',
          level: 'low',
          levelText: '轻微',
          status: 'resolved',
          statusText: '已处理'
        },
        {
          time: '11:55',
          type: '气体泄漏',
          location: '山区隧道',
          level: 'high',
          levelText: '严重',
          status: 'resolved',
          statusText: '已处理'
        },
        {
          time: '10:30',
          type: '机械碰撞',
          location: '桥梁吊装区',
          level: 'medium',
          levelText: '一般',
          status: 'processing',
          statusText: '处理中'
        },
        {
          time: '09:42',
          type: '安全带脱落',
          location: '高空作业区',
          level: 'high',
          levelText: '严重',
          status: 'resolved',
          statusText: '已处理'
        },
        {
          time: '08:15',
          type: '噪音超标',
          location: '施工现场',
          level: 'low',
          levelText: '轻微',
          status: 'resolved',
          statusText: '已处理'
        }
      ],
      chart: null,
      timer: null
    }
  },
  mounted() {
    this.initChart()
    this.startDataUpdate()
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.eventsChart)
      
      const hours = []
      const eventCounts = []
      
      // 生成过去24小时的数据
      for (let i = 23; i >= 0; i--) {
        const hour = new Date()
        hour.setHours(hour.getHours() - i)
        hours.push(hour.getHours().toString().padStart(2, '0') + ':00')
        
        // 模拟事件数量，白天较多，夜间较少
        const hourOfDay = hour.getHours()
        let baseCount = 0
        if (hourOfDay >= 8 && hourOfDay <= 18) {
          baseCount = Math.floor(Math.random() * 4) + 1 // 1-4个事件
        } else {
          baseCount = Math.floor(Math.random() * 2) // 0-1个事件
        }
        eventCounts.push(baseCount)
      }
      
      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.8)',
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '8%',
          right: '8%',
          bottom: '15%',
          top: '10%'
        },
        xAxis: {
          type: 'category',
          data: hours,
          axisLine: {
            lineStyle: {
              color: '#333'
            }
          },
          axisLabel: {
            color: '#999',
            fontSize: 9,
            interval: 3
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#333'
            }
          },
          axisLabel: {
            color: '#999',
            fontSize: 9
          },
          splitLine: {
            lineStyle: {
              color: '#333'
            }
          }
        },
        series: [
          {
            name: '安全事件',
            type: 'bar',
            data: eventCounts,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ff6b6b' },
                { offset: 1, color: '#ff9999' }
              ])
            },
            barWidth: '60%'
          }
        ]
      }
      
      this.chart.setOption(option)
    },
    
    startDataUpdate() {
      this.timer = setInterval(() => {
        this.updateEvents()
      }, 15000) // 每15秒更新一次
    },
    
    updateEvents() {
      // 随机添加新事件
      if (Math.random() < 0.3) { // 30% 概率添加新事件
        const eventTypes = [
          '高空坠物', '设备故障', '人员违章', '气体泄漏', '机械碰撞',
          '安全带脱落', '噪音超标', '违章操作', '材料散落', '电气故障'
        ]
        
        const locations = [
          '长江大桥施工区', '隧道掘进面', '材料堆放区', '山区隧道',
          '桥梁吊装区', '高空作业区', '施工现场', '设备维护区'
        ]
        
        const levels = [
          { level: 'high', levelText: '严重' },
          { level: 'medium', levelText: '一般' },
          { level: 'low', levelText: '轻微' }
        ]
        
        const now = new Date()
        const randomType = eventTypes[Math.floor(Math.random() * eventTypes.length)]
        const randomLocation = locations[Math.floor(Math.random() * locations.length)]
        const randomLevel = levels[Math.floor(Math.random() * levels.length)]
        
        const newEvent = {
          time: `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`,
          type: randomType,
          location: randomLocation,
          level: randomLevel.level,
          levelText: randomLevel.levelText,
          status: 'processing',
          statusText: '处理中'
        }
        
        // 添加到列表顶部
        this.events.unshift(newEvent)
        
        // 保持列表长度不超过10条
        if (this.events.length > 10) {
          this.events = this.events.slice(0, 10)
        }
        
        // 更新统计数据
        this.todayEvents++
      }
      
      // 随机更新事件状态
      this.events.forEach(event => {
        if (event.status === 'processing' && Math.random() < 0.2) {
          event.status = 'resolved'
          event.statusText = '已处理'
          this.resolvedEvents++
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.safety-events {
  height: 100%;
  padding: 15px;
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  .module-title {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    flex-shrink: 0;
    
    .title-icon {
      font-size: 20px;
      margin-right: 8px;
    }
    
    .title-text {
      font-size: 16px;
      font-weight: bold;
      color: #ff6b6b;
    }
  }
  
  .events-summary {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-shrink: 0;
    
    .summary-card {
      flex: 1;
      text-align: center;
      padding: 8px 6px;
      border-radius: 4px;
      
      .summary-value {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 3px;
      }
      
      .summary-label {
        font-size: 11px;
        opacity: 0.8;
      }
      
      &.today {
        background: rgba(255, 107, 107, 0.2);
        .summary-value { color: #ff6b6b; }
      }
      
      &.week {
        background: rgba(255, 167, 38, 0.2);
        .summary-value { color: #ffa726; }
      }
      
      &.resolved {
        background: rgba(0, 212, 170, 0.2);
        .summary-value { color: #00d4aa; }
      }
    }
  }
  
  .events-list {
    flex: 1;
    min-height: 0;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    .list-header {
      display: flex;
      padding: 6px 0;
      border-bottom: 1px solid #333;
      font-size: 12px;
      color: #999;
      flex-shrink: 0;
      
      span:nth-child(1) { width: 45px; }
      span:nth-child(2) { flex: 1; }
      span:nth-child(3) { width: 50px; text-align: center; }
      span:nth-child(4) { width: 60px; text-align: center; }
    }
    
    .list-content {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      
      .event-item {
        display: flex;
        align-items: center;
        padding: 6px 4px;
        border-bottom: 1px solid #222;
        font-size: 11px;
        
        &.high {
          border-left: 3px solid #ff6b6b;
          background-color: rgba(255, 107, 107, 0.05);
        }
        
        &.medium {
          border-left: 3px solid #ffa726;
          background-color: rgba(255, 167, 38, 0.05);
        }
        
        &.low {
          border-left: 3px solid #4fc3f7;
          background-color: rgba(79, 195, 247, 0.05);
        }
        
        .event-time {
          width: 45px;
          color: #999;
          font-size: 11px;
          flex-shrink: 0;
        }
        
        .event-type {
          flex: 1;
          min-width: 0;
          padding: 0 4px;
          
          .type-name {
            font-weight: bold;
            margin-bottom: 2px;
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          
          .type-location {
            color: #999;
            font-size: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        
        .event-level {
          width: 50px;
          text-align: center;
          flex-shrink: 0;
          
          .level-badge {
            padding: 2px 6px;
            border-radius: 8px;
            font-size: 10px;
            white-space: nowrap;
            
            &.high {
              background-color: rgba(255, 107, 107, 0.3);
              color: #ff6b6b;
            }
            
            &.medium {
              background-color: rgba(255, 167, 38, 0.3);
              color: #ffa726;
            }
            
            &.low {
              background-color: rgba(79, 195, 247, 0.3);
              color: #4fc3f7;
            }
          }
        }
        
        .event-status {
          width: 60px;
          text-align: center;
          flex-shrink: 0;
          
          .status-badge {
            padding: 2px 6px;
            border-radius: 8px;
            font-size: 10px;
            white-space: nowrap;
            
            &.processing {
              background-color: rgba(255, 167, 38, 0.3);
              color: #ffa726;
            }
            
            &.resolved {
              background-color: rgba(0, 212, 170, 0.3);
              color: #00d4aa;
            }
          }
        }
      }
    }
  }
  
  .events-chart {
    flex-shrink: 0;
    
    .chart-title {
      font-size: 12px;
      color: #999;
      margin-bottom: 6px;
    }
    
    .chart-container {
      height: 100px;
    }
  }
}

/* 滚动条样式 */
.list-content::-webkit-scrollbar {
  width: 3px;
}

.list-content::-webkit-scrollbar-track {
  background: #1a1a1a;
}

.list-content::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 2px;
}

.list-content::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>



